import {
  list as accountlist, del
} from '../../../../../api/account'
const app = getApp();
const util = require('../../../../../utils/util')
Component({
  lifetimes: {
    created() {
      app.event.on("onBankChange", this.getBank.bind(this))
    },
    attached() {
      this.getBank()
    }
  },
  data: {
    num: '',
    accountlist: [],
    accountlistitem: {},
    isClose: "", //控制是关闭弹窗还是跳转订单确认页面
    flag: false,
    moveIndex: 0,
    startX: 0
  },
  methods: {
    removeItem(item, index) {
      var _this = this
      del(item.id).then(res => {
        _this.goRight(index, 0);
        _this.accountlist.splice(index, 1);
      })
    },
    handleSwipe(e, index) {
      if (e.direction == "left") {
        this.goLeft(index);
      } else if (e.direction == "right") {
        this.goRight(index);
      }
    },
    goLeft(index) {
      let itemEl = this.$refs.itemDev[index]; //第二左滑条目与前一次左滑条目相同时，不处理
      if (index == this.currentIndex) {
        return;
      } //当前有划出的条目的时候，左滑其他条目，当前的条目归位，
      if (this.currentIndex != -1) {
        this.goRight(this.currentIndex);
      } //左滑当前条目
      if (this.currentIndex != index) {
        animation.transition(
          itemEl,
          {
            styles: {
              transform: "translate(-160px, 0px)",
              transformOrigin: "center center",
            },
            duration: 200, //ms
            timingFunction: "linear",
            delay: 0, //ms
          },
          function () { }
        );
        this.currentIndex = index;
      }
    },
    goRight(index, time = 200) {
      let itemEl = this.$refs.itemDev[index];
      animation.transition(
        itemEl,
        {
          styles: {
            transform: "translate(0px, 0px)",
            transformOrigin: "center center",
          },
          duration: time, //动画时间
          timingFunction: "linear", //线性运动
          delay: 0, //ms
        }
      );
      this.currentIndex = -1;
    },
    selectbank(e) {
      this.data.num = e.currentTarget.dataset.index
      this.data.accountlistitem = e.currentTarget.dataset.item
      if (this.data.moveIndex!=this.data.num) {
        this.hideDeleteButton()
      }
      this.setData({
        num: this.data.num,
        accountlistitem: this.data.accountlistitem
      })
    },
    getBank() {
      if (util.isNull(app.globalData.token)) {
        setTimeout(() => {
          this.getBank()
        }, 1000)
      }
      accountlist().then(res => {
        if (res.type == "success") {
          this.data.accountlist = res.data
          this.setData({
            accountlist: this.data.accountlist
          })
          if (this.data.accountlist.length > 0) {
            this.triggerEvent("selectedInfo", this.data.accountlist[0])
          }
        }
      })
    },
    addNewCard() {
      wx.navigateTo({
        url: '/pages/wallet/jumpPage/distribution/addBank',
      })
    },
    submit() {
      this.hideFrame();
      this.triggerEvent("selectedInfo", this.data.accountlistitem)
    },
    //显示底部弹窗
    showFrame(id, type) {
      this.data.flag = true
      this.setData({
        flag: this.data.flag
      })
    },
    //隐藏底部弹窗
    hideFrame() {
      this.data.flag = false,
        this.setData({
          flag: this.data.flag
        })
    },

    /**
     * 处理滑动开始
     */
    handleTouchStart(e) {
      this.data.startX = e.touches[0].pageX
    },

    /**
     * 处理滑动
     */
    handleTouchEnd(e) {
      let index = e.currentTarget.dataset.index;
      if (index == this.data.num) {
        this.hideDeleteButton(e)
        return
      }

      if (e.changedTouches[0].pageX < this.data.startX && e.changedTouches[0].pageX - this.data.startX <= -30 && index != this.data.num) {
        //左滑 
        this.showDeleteButton(e)
      } else if (e.changedTouches[0].pageX > this.data.startX && e.changedTouches[0].pageX - this.data.startX < 30 && index != this.data.num) {
        //右滑
        this.showDeleteButton(e)
      } else {
        this.hideDeleteButton(e)
      }
    },
    /**
      * 显示删除按钮
      */
    showDeleteButton(e) {
      let index = e.currentTarget.dataset.index;
      if (index!=this.data.moveIndex) {
        this.hideDeleteButton()
      }
      this.data.moveIndex = index
      this.setXmove(index, -65);
    },


    /**
      * 隐藏删除按钮
      */
    hideDeleteButton(e) {
      let index = e ? e.currentTarget.dataset.index : this.data.moveIndex;
      this.setXmove(index, 0);
    },


    /**
     * 设置movable-view位移
     */
    setXmove(index, xmove) {
      let { accountlist } = this.data;
      accountlist[index].xmove = xmove;
      this.setData({
        accountlist: accountlist
      })
    },

    /**
      * 处理movable-view移动事件
      */
    handleMovableChange(e) {
      if (e.detail.source === 'friction') {
        if (e.detail.x < -30) {
          this.showDeleteButton(e)
        } else {
          this.hideDeleteButton(e)
        }
      } else if (e.detail.source === 'out-of-bounds' && e.detail.x === 0) {
        this.hideDeleteButton(e)
      }
    },

    handleDelete(e) {
      const { id, index } = e.currentTarget.dataset;
      if (index == this.data.num) {
        wx.showToast({
          title: '已选择不能删除',
          icon: 'none'
        })
        return
      }
      if (index < this.data.num) {
        this.data.num -= 1
      }
      del(id).then(res => {
        this.data.accountlist.splice(index, 1)
        this.setData({
          num: this.data.num,
          accountlist: this.data.accountlist
        })
        wx.showToast({
          title: '删除成功',
          icon: 'success'
        })
      })
    }
  }
})
